<template>
  <div class="playBackCube">
    <div class="video-list-box">
      <el-table class="videoListTable" :data="videoData" :paganition="false" style="width: 100%">
        <el-table-column prop="startTime" label="开始时间" align="center" width="60"> </el-table-column>
        <el-table-column prop="endTime" label="结束时间" align="center" width="60"> </el-table-column>
        <el-table-column label="大小" align="center" width="104">
          <template slot-scope="scope">
            <span>{{ scope.row.size }}</span>
            <img
              src="./images/playBtn.svg"
              alt=""
              v-show="scope.row.playState !== true"
              @click="playVideo(scope.row)"
            />
            <img
              src="./images/stopBtn.svg"
              alt=""
              v-show="scope.row.playState === true"
              @click="stopVideo(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="video-timeline-box">
      <div class="time-line-header">
        <div class="title">录像</div>
        <div class="opetate">
          <el-button size="small" type="primary">拍照</el-button>
          <el-button size="small" type="primary">下载</el-button>
        </div>
      </div>
      <div class="time-line" id="timeLine">
        <el-row class="degree-box">
          <el-col v-for="n in 23" :key="n" class="degree" :span="1">
            <span class="degree-txt">{{ (n &lt; 10 ? '0'+n : n) + ':00' }}</span>
          </el-col>
        </el-row>
        <!-- 最下面一层带背景色的视频片段 -->
        <div
          v-for="item in videoListData"
          :key="item.key"
          :style="{ left: item.left, width: item.width }"
          :class="item.playState ? 'video-parag-active' : ''"
          class="video-parag"
        ></div>
        <!-- 可以点击的透明色视频片段 -->
        <div
          v-for="item in videoListData"
          :key="item.key + 'ss'"
          @click="changePlayState(item)"
          :style="{ left: item.left, width: item.width }"
          class="video-parag-transparent"
        ></div>
      </div>
      <div class="video-stream">
        <v-chart :options="polar" />
        <!--        <div class="video-stream-chart" id="videoStreamchart"></div>-->
      </div>
      <div class="video-tags">
        <span class="video-tags-item"><span class="video-tags-icon"></span>没有视频</span>
        <span class="video-tags-item"><span class="video-tags-icon video-tags-icon-has"></span>连续</span>
        <span class="video-tags-item"><span class="video-tags-icon video-tags-icon-play"></span>正在播放</span>
      </div>
    </div>
  </div>
</template>
<script>
// 视频分段选择

/* const videoData = [
    {
      key: '1',
      startTime: '16:00',
      endTime: '16:03',
      size: '3.0mb',
      playState: false
    },
    {
      key: '2',
      startTime: '17:58',
      endTime: '18:09',
      size: '1.9mb',
      playState: false
    },
    {
      key: '3',
      startTime: '20:54',
      endTime: '23:09',
      size: '2.8mb',
      playState: false
    }
  ] */
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
let timer

export default {
  data () {
    let arr = []
    let data = []
    arr.length = 400
    for (let i = 0; i < arr.length; i++) {
      arr[i] = i
      data[i] = Math.random() * 10000
    }
    let polar = {
      grid: {
        /*    left: '5%',
        right: '5%',
        top: '5%',
        bottom: '5%', */
        x: '2%',
        y: '5%',
        x2: '2%',
        y2: '5%'
      },
      xAxis: {
        type: 'category',
        data: arr,
        show: false
      },
      yAxis: {
        type: 'value',
        show: false
      },
      series: [
        {
          data: data,
          showSymbol: false,
          type: 'line',
          lineStyle: {
            color: '#08CF7E',
            width: 1
          }
        }
      ]
    }

    return {
      polar
    }
  },
  mounted () {
    this.initChart()
    window.onresize = () => {
      clearInterval(timer)
      this.initChart()
    }
  },
  props: ['videoData'],
  components: {
    'v-chart': ECharts
  },
  computed: {
    videoListData () {
      // 视频在实现线上的分布
      if (!this.videoData || !this.videoData.length) {
        return []
      }
      const oneDayMinites = 24 * 60
      return this.videoData.map(item => {
        return {
          key: item.key,
          left: this.toPercent((item.startTime.split(':')[0] * 60 + item.startTime.split(':')[1] * 1) / oneDayMinites),
          width: this.toPercent(
            (item.endTime.split(':')[0] * 60 +
              item.endTime.split(':')[1] * 1 -
              (item.startTime.split(':')[0] * 60 + item.startTime.split(':')[1] * 1)) /
              oneDayMinites
          ),
          playState: item.playState
        }
      })
    }
  },
  methods: {
    initChart () {
      timer = setInterval(() => {
        for (let i = 0; i < this.polar.xAxis.data.length; i++) {
          // console.log(this.polar.series[0].data)
          this.$set(this.polar.series[0].data, i, Math.random() * 10000)
          // this.polar.series[0].data[i] = Math.random() * 10000
        }
      }, 150)
    },
    /*    initChart () {
      if (timer) { clearInterval(timer) }
      let myChart = this.$echarts.init(document.getElementById('videoStreamchart'))
      let arr = []
      let data = []
      arr.length = 400
      for (let i = 0; i < arr.length; i++) {
        arr[i] = i
        data[i] = Math.random() * 10000
      }
      timer = setInterval(() => {
        for (let i = 0; i < arr.length; i++) {
          data[i] = Math.random() * 10000
        }
        myChart.setOption(option)
      }, 200)
      let option = {
        grid: {
          left: '5%',
          right: '5%',
          top: '5%',
          bottom: '5%'
        },
        xAxis: {
          type: 'category',
          data: arr,
          show: false
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [{
          data: data,
          showSymbol: false,
          type: 'line',
          lineStyle: {
            color: '#08CF7E',
            width: 1
          }
        }]
      }
      // 绘制图表
      myChart.setOption(option)
    }, */
    changePlayState (record) {
      // 循环是因为视频播放条数据用的计算属性不能改变
      this.videoData.forEach(item => {
        if (item.key === record.key) {
          if (record.playState) {
            this.$emit('stopVideo', item.key)
            item.playState = false
          } else {
            this.videoData.forEach(item2 => {
              item2.playState = false
            })
            this.$emit('playVideo', item.key)
            item.playState = true
          }
        }
      })
      // console.log(record.key, record.playState) //触发传给父组件key值也就是ID,和播放状态
    },
    playVideo (item) {
      this.$emit('playVideo', item.key)
      this.videoData.forEach(item => {
        item.playState = false
      })
      item.playState = true
    },
    stopVideo (item) {
      this.$emit('stopVideo', item.key)
      this.videoData.forEach(item => {
        item.playState = false
      })
      item.playState = false
    },
    toPercent (point) {
      // 小数转百分数
      let str = Number(point * 100).toFixed(2)
      str += '%'
      return str
    }
  },
  beforeDestroy () {
    clearInterval(timer)
  }
}
</script>
<style lang="scss">
.playBackCube {
  height: 100%;
  width: 100%;
  display: flex;
  padding-right: 40px;
  box-sizing: border-box;
  flex-direction: row;
  background: none;

  .video-list-box {
    width: 224px;
    height: 100%;
    font-size: 12px;

    .videoListTable {
      height: 100%;
      width: 100%;
    }
  }

  .video-timeline-box {
    margin-left: 20px;
    flex-grow: 1;
    border: 1px solid #cfdde6;
    font-size: 12px;

    .time-line-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 6px 10px 4px;
      color: #22272f;

      .ant-btn {
        margin-left: 10px;
        font-size: 12px;
      }
    }

    .time-line {
      position: relative;
      width: 100%;
      height: 28px;
      background: #cfdde6;

      .degree-box {
        z-index: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      .degree {
        height: 8px;
        border-right: 1px solid #fff;

        .degree-txt {
          font-size: 12px;
          display: inline-block;
          width: 100%;
          margin-top: 8px;
          transform: translateX(50%);
          color: #fff;
        }
      }

      // 视频片段
      .video-parag {
        position: absolute;
        height: 100%;
        background: #5f76ff;

        &.video-parag-active {
          background: #ef2e55;
        }
      }

      .video-parag-transparent {
        z-index: 2;
        position: absolute;
        height: 100%;
        background: transparent;
        cursor: pointer;
      }
    }
  }

  .video-stream {
    position: relative;
    height: 180px;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    border-bottom: 1px solid #cfdde6;

    .video-stream-chart {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
  }

  .video-tags {
    text-align: center;

    .video-tags-item {
      display: inline-block;
      margin: 8px;
      font-size: 12px;
    }

    .video-tags-icon {
      display: inline-block;
      margin-bottom: -1px;
      margin-right: 5px;
      height: 12px;
      width: 12px;
      background: #cfdde6;

      &.video-tags-icon-has {
        background: #5f76ff;
      }

      &.video-tags-icon-play {
        background: #ef2e55;
      }
    }
  }
}

.echarts {
  width: 100%;
  height: 100%;
}
</style>
